<template>
    <el-drawer v-model="listDrawer" direction="rtl" :show-close="false" :close-on-press-escape="false" append-to-body
        :with-header="false" class="workflow-component" modal-class="modal-class" size="500px">
        <template #header>
            <div class="header">
                节点信息
            </div>
        </template>
        <el-row>
            <el-col :span="nameSpan" class="c-title">
                <span>任务名称:</span>
            </el-col>
            <el-col :span="valueSpan">
                <span>{{ nodeInfo.name }}</span>
            </el-col>
        </el-row>
        <el-divider />
        <el-row>
            <el-col :span="nameSpan" class="c-title">
                <span>任务组别:</span>
            </el-col>
            <el-col :span="valueSpan">
                <span>{{ nodeInfo.group }}</span>
            </el-col>
        </el-row>
        <el-divider />
        <el-row>
            <el-col :span="nameSpan" class="c-title">
                <span>下次执行时间:</span>
            </el-col>
            <el-col :span="valueSpan">
                <span>{{ nodeInfo.nextRunTime || '暂无' }}</span>
            </el-col>
        </el-row>
        <el-divider />
        <el-row>
            <el-col :span="nameSpan" class="c-title">
                <span>仅本工作流调用:</span>
            </el-col>
            <el-col :span="valueSpan">
                <span>{{ nodeInfo.onlyThisUsed ? '是' : '否' }}</span>
            </el-col>
        </el-row>
        <el-divider />
        <el-row>
            <el-col :span="nameSpan" class="c-title">
                <span>错误处理策略:</span>
            </el-col>
            <el-col :span="valueSpan">
                <el-radio-group v-model="nodeInfo.errTransfer" @change="change"
                    :disabled="nodeInfo.group === 'virtual'">
                    <el-radio :value="1">忽略错误</el-radio>
                    <el-radio :value="2">终止任务</el-radio>
                </el-radio-group>
            </el-col>
        </el-row>
        <el-divider />
    </el-drawer>

</template>

<script setup>
import { useElMessage, useRequest } from "@usehook"

let nameSpan = $ref(8)
let valueSpan = $ref(16)

const listDrawer = defineModel({
    type: Boolean,
    default: false
})

const props = defineProps({
    nodeInfo: {
        type: Object,
        default: {}
    }
})
const change = async () => {
    const resData = await useRequest({
        url: "/jobinfo/errTransfer", jobId: props.nodeInfo.sequence, workflowId: props.nodeInfo.wfSequence, errTransfer: props.nodeInfo.errTransfer
    })
    if (resData && !resData.status) {
        useElMessage.error("错误处理策略更新失败")
    }
}
</script>

<style>
.workflow-component .el-row {
    padding-top: 2px !important;
}

.workflow-component .el-drawer__header {
    margin-bottom: 0 !important;
    padding: 5px 5px 0;
}

.workflow-component .el-drawer__body {
    padding: 5px 15px;
}

.workflow-component .el-tabs__item {
    font-size: 12px;
    height: 35px;
}

.workflow-component .el-scrollbar__bar.is-vertical>div {
    width: 0 !important;
}

.workflow-component .el-divider--horizontal {
    margin: 5px 0 !important;
}

.workflow-component .el-col {
    height: 32px;
    display: flex;
    align-items: center;
}

.workflow-component {
    position: absolute;
}

.workflow-component .c-title {
    justify-content: flex-end;
    padding-right: 30px;
}

.workflow-component .header {
    font-family: inherit;
    font-size: 20px;
    text-align: center;
    padding: 10px;
}

.workflow-component .el-divider {
    height: 20px;
}
</style>